<template>
  <div>
    <!-- head -->
    <el-card class="elc1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员查询</el-breadcrumb-item>
        <el-breadcrumb-item>会员详情</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>会员详情</h1>
    </el-card>
    <!-- body1 -->
    <el-card class="elc2">
      <el-container>
        <!-- 左侧 -->
        <el-aside width="150px">
          <template slot-scope="scope">
          <span class="ss1">基础资料</span>
          <el-row class="demo-avatar demo-basic">
            <el-col :span="10">
              <el-avatar :size="60" :src="circleUrl"></el-avatar>
              
              <el-button type="primary" @click="alter"
                >编辑资料</el-button
              >
             
              <!-- 编辑资料弹出框 -->
              <el-dialog
                class="eld"
                title="编辑基础资料"
                :visible.sync="dialogFormVisible"
                width="600px"
              >
                <!-- 第一行 -->
               <el-form>
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">会员姓名</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">联系方式</span>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model=" form.input1"> </el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model=" form.input2"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">会员性别</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">会员年龄</span>
                  </el-col>
                </el-row>
                <!-- 第四行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-radio v-model=" form.radio" label="男"></el-radio>
                    <el-radio v-model=" form.radio" label="女"></el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model=" form.input3"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第五行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <span class="s2">常用收货人</span>
                  </el-col>
                </el-row>
                <!-- 第六行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <el-input placeholder="请输入" v-model=" form.input4"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第七行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <span class="s2">详细地址</span>
                  </el-col>
                </el-row>
                <!-- 第八行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <el-input
                      class="eli1"
                      placeholder="请输入"
                      v-model=" form.input5"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 第九行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <span class="s2">会员备注</span>
                  </el-col>
                </el-row>
                <!-- 第十行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <el-input
                      class="eli1"
                      placeholder="请输入"
                      v-model=" form.input6"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                </el-form>
                <!-- 第十一行 -->
                <el-row type="flex" justify="center">
                  <el-col :span="9">
                    <el-button @click="dialogFormVisible = false" class="elb"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="dialogFormVisible = false"
                      class="elb"
                      >确 定</el-button
                    >
                  </el-col>
                </el-row>
              </el-dialog>
            </el-col>
          </el-row>
           </template>
        </el-aside>
        <!-- 右侧 -->
        <el-main>
          <!-- 第一行 -->
          <el-row type="flex">
            <el-col :span="8">
              <span class="s1">会员姓名 :</span>
              <span>{{receive.userName}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">会员手机 :</span>
              <span>{{receive.phone}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">会员卡号 :</span>
              <span>{{receive.vipNumber}}</span>
            </el-col>
          </el-row>

          <!-- 第二行 -->
          <el-row type="flex">
            <el-col :span="8">
              <span class="s1">会员性别 :</span>
              <span>{{receive.sex}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">会员年龄 :</span>
              <span>{{receive.age}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">微信昵称 :</span>
              <span>{{receive.nickName}}</span>
            </el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row type="flex">
            <el-col :span="8">
              <span class="s1">常用收货人 :</span>
              <span>{{receive.consignee}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">详细地址 :</span>
              <span>{{receive.address}}</span>
            </el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row type="flex">
            <el-col :span="8">
              <span class="s1">来源方式 :</span>
              <span>{{receive.resource}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">成为会员时间 :</span>
              <span>{{receive.created}}</span>
            </el-col>
            <el-col :span="8">
              <span class="s1">最近登录时间 :</span>
              <span>{{receive.loginTime}}</span>
            </el-col>
          </el-row>

          <!-- 第五行 -->
          <el-row type="flex">
            <el-col :span="8">
              <span class="s1">会员备注 :</span>
              <span>{{receive.description}}</span>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-card>
    <!-- body2 -->
    <el-card class="elc3">
      <!-- 第一行 -->
      <el-row type="flex">
        <el-col :span="5">
          <span class="s1">会员标签</span>
          <el-link
            type="primary"
            :underline="false"
            @click="dialogTagVisible = true">编辑标签</el-link>
          <!-- 弹出框 -->
          <el-dialog title="编辑标签" :visible.sync="dialogTagVisible"
           width="550px" >
            <!-- 第一行 -->
            <el-row type="flex">
             <el-col :span="5">
              <span>选择标签</span>
             </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row type="flex">
             <el-col :span="24">
              <el-checkbox-button v-model="checked1" label="标签一" ></el-checkbox-button>
              <el-checkbox-button v-model="checked2" label="标签二" ></el-checkbox-button>
              <el-checkbox-button v-model="checked3" label="标签三" ></el-checkbox-button>
              <el-checkbox-button v-model="checked4" label="标签四" ></el-checkbox-button>
              <el-checkbox-button v-model="checked5" label="标签五"></el-checkbox-button>
             </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row type="flex" >
              <el-col :span="9">
                <el-button @click="dialogTagVisible = false" class="elb">取 消</el-button>
                <el-button
                type="primary"
                @click="dialogTagVisible = false" class="elb">确 定</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <span class="s2">标签一</span>
          <span class="s2">标签二</span>
          <span class="s2">标签三</span>
        </el-col>
      </el-row>
    </el-card>
    <!-- body3 -->
    <el-card class="elc4">
      <!-- 第一行 -->
      <el-row type="flex">
        <el-col :span="5">
          <span class="s1">会员资产</span>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row type="flex">
        <el-col :span="5">
          <span class="s2">累计积分</span>
        </el-col>
        <el-col :span="5">
          <span class="s2">累计成长值</span>
        </el-col>
        <el-col :span="5">
          <span class="s2">付费会员卡</span>
        </el-col>
        <el-col :span="5">
          <span class="s2">会员等级</span>
        </el-col>
        <el-col :span="5">
          <span class="s2">储值卡余额（元）</span>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row type="flex">
        <el-col :span="5">
          <span class="s3">400</span>
        </el-col>
        <el-col :span="5">
          <span class="s3">4000</span>
        </el-col>
        <el-col :span="5">
          <span class="s3 s3-1">已过期</span>
        </el-col>
        <el-col :span="5">
          <span class="s3">白金</span>
        </el-col>
        <el-col :span="5">
          <span class="s3"><b>10000</b></span>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row type="flex">
        <!-- 修改积分 -->
        <el-col :span="5">
          <el-link type="primary" :underline="false"
         @click="dialogTotalVisible = true">修改积分</el-link>
             <el-dialog title="修改积分" :visible.sync="dialogTotalVisible"
           width="500px" >
            <!-- 第一行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">当前积分</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input v-model="input7" :disabled="true"></el-input>
               </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">数量</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input type="number" v-model="input8" ></el-input>
               </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">操作备注</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input placeholder="请输入" v-model="input9" ></el-input>
               </el-col>
              </el-row>
               <!-- 第四行 -->
            <el-row type="flex" class="ee">
              <el-col :span="9">
                <el-button @click="dialogTotalVisible = false" class="elb">取 消</el-button>
                <el-button
                type="primary"
                @click="dialogTotalVisible = false" class="elb">确 定</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
        <!-- 修改成长值 -->
        <el-col :span="5">
          <el-link type="primary" :underline="false"
         @click="dialogGrowVisible = true">修改成长值</el-link>
             <el-dialog title="修改成长值" :visible.sync="dialogGrowVisible"
           width="500px" >
            <!-- 第一行 -->
              <el-row type="flex" class="elr" >
               <el-col :span="24">
                 <span class="s4">当前成长值</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input v-model="input10" :disabled="true"></el-input>
               </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">数量</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input type="number" v-model="input11" ></el-input>
               </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">操作备注</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input placeholder="请输入" v-model="input12" ></el-input>
               </el-col>
              </el-row>
               <!-- 第四行 -->
            <el-row class="ee" type="flex">
              <el-col :span="9">
                <el-button @click="dialogGrowVisible = false" class="elb">取 消</el-button>
                <el-button
                type="primary"
                @click="dialogGrowVisible = false" class="elb">确 定</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
        <!-- 查看会员卡 -->
        <el-col :span="5">
          <el-link type="primary" :underline="false"
          @click="dialogCardVisible = true" class="ell">查看</el-link>
             <el-dialog title="付费会员详情" :visible.sync="dialogCardVisible"
            width="500px" >
            <!-- 第一行 -->
              <el-row type="flex" class="elr">
               <el-col :span="16" class="elc">
                 <el-row type="flex" justify="center">
                 <el-col :span="20">
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                 <el-col :span="20">
                  <b class="b1">VIP</b>
                  <span class="s4-4">超级会员</span>
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="elr1">
                 <el-col :span="20">
                  <span>有效期至 : </span>
                  <span> 2020年9月10号到期</span>
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                 <el-col :span="20">
                  <span>预计为您节省 : </span>
                  <span><span class="b2">888</span>元/年</span>
                 </el-col>
                </el-row>
               </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row type="flex" class="elr2">
               <el-col :span="10">
                 <span class="s5">开卡条件 </span>
                 <span class="s6">付费1200元</span>
               </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row type="flex" class="elr2">
               <el-col :span="10">
                 <span class="s5">开卡日期 </span>
                 <span class="s6">2019年9月9日</span>
               </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row type="flex" class="elr2">
               <el-col :span="10">
                 <span class="s5 s5-1">有效期 </span>
                 <span class="s6">2020年9月9日</span>
               </el-col>
              </el-row>
              <!-- 第五行 -->
              <el-row type="flex" class="elr2">
               <el-col :span="10">
                 <span class="s5">会员权益 </span>
                 <span class="s6">成长加速</span>
               </el-col>
              </el-row>
              <!-- 第六行 -->
            <el-row type="flex" class="elr3">
              <el-col :span="9">
                <el-button 
                type="primary"
                @click="dialogCardVisible = false" class="elb">关 闭</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
        <!-- 查看会员等级 -->
       <el-col :span="5">
          <el-link type="primary" :underline="false"
          @click="dialogGradeVisible = true" class="ell">查看</el-link>
             <el-dialog title="付费会员详情" :visible.sync="dialogGradeVisible"
            width="500px" >
            <!-- 第一行 -->
              <el-row type="flex" class="elr">
               <el-col :span="16" class="elc1">
                 <el-row type="flex" justify="center">
                 <el-col :span="20">
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                 <el-col :span="20">
                  <span class="s4">白金会员</span>
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="elr1-1">
                 <el-col :span="20">
                  <span><span class="b2">560</span>/1000</span>
                 </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                 <el-col :span="20">
                 <el-progress class="elp" :percentage="56"
                 color="rgb(126, 145, 123);"></el-progress>
                 <span>成长值 距离升级还有600成长值</span>
                 </el-col>
                </el-row>
               </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row type="flex" class="elr2">
               <el-col :span="10">
                 <span class="s5">会员权益 </span>
                 <span class="s6">成长加速</span>
               </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row type="flex" class="elr2" justify="center">
               <el-col :span="17">
                 <span class="s6">商品折扣</span>
               </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row type="flex" class="elr2"
              justify="center">
               <el-col :span="17">
                 <span class="s6">积分翻倍</span>
               </el-col>
              </el-row>
              <!-- 第五行 -->
              <el-row type="flex" class="elr3">
              <el-col :span="9">
                <el-button 
                type="primary"
                @click="dialogGradeVisible = false" class="elb">关 闭</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
        <!-- 充值 -->
       <el-col :span="5">
          <el-link type="primary" :underline="false"
         @click="dialogRechargeVisible = true" class="ell">充值</el-link>
             <el-dialog title="储值卡充值" :visible.sync="dialogRechargeVisible"
           width="500px" >
            <!-- 第一行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">当前余额（元）</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input v-model="input13" :disabled="true"></el-input>
               </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">充值金额（元）</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input type="number" v-model="input14" ></el-input>
               </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">赠送金额（元）</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input type="number" v-model="input15" ></el-input>
               </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row type="flex" class="elr">
               <el-col :span="24">
                 <span class="s4">操作备注</span>
               </el-col>
              </el-row>
              <el-row type="flex">
               <el-col :span="24">
                 <el-input placeholder="请输入" v-model="input16" ></el-input>
               </el-col>
              </el-row>
               <!-- 第四行 -->
            <el-row type="flex" class="ee">
              <el-col :span="9">
                <el-button @click="dialogRechargeVisible = false" class="elb">取 消</el-button>
                <el-button
                type="primary"
                @click="dialogRechargeVisible = false" class="elb">确 定</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-col>
      </el-row>
    </el-card>
    <!-- foot -->
    <el-card class="elc5">
      <!-- 订单记录 -->
     <el-tabs v-model="activeName" >
    <!-- <el-tab-pane label="订单记录" name="first">
    
      <el-row class="elrh">
        <el-col :span="6">商品信息</el-col>
        <el-col :span="5">会员信息</el-col>
        <el-col :span="3">订单来源</el-col>
        <el-col :span="3">发货方式</el-col>
        <el-col :span="3">订单状态</el-col>
        <el-col :span="4">操作</el-col>
      </el-row>
     
      <el-row class="elrb">
        <el-col :span="7"
        >订单编号 : {{tableDataa.num}}</el-col>
        <el-col :span="8">下单时间 : {{tableDataa.created}}</el-col>
        <el-col :span="5">微信支付</el-col>
        <el-col :span="4">{{tableDataa.created}}</el-col>
      </el-row>
      
      <el-row class="elrf">
        
        <el-col :span="6" class="elco">
          <el-row>
            
            <el-col :span="17">
             <el-link type="primary"  :underline="false">{{tableDataa.name}}</el-link>
          <p>{{tableDataa.price}}</p>
            </el-col>
          </el-row>
        </el-col>
        
        <el-col :span="5"
        class="elco">
          <el-row>
            <el-col :span="7">
              <el-avatar :size="50" :src="tableDataa.circleUrl"></el-avatar>
            </el-col>
            <el-col :span="17">
             <el-link type="primary"  :underline="false">    <router-link to="/home/Detail" tag="span">{{tableDataa.consignee}}</router-link> 
          </el-link>
          <p>{{tableDataa.consignee_phone}}</p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" class="elco">{{tableDataa.soucre}}</el-col>
        <el-col :span="3" class="elco">{{tableDataa.deliver}}</el-col>
        <el-col :span="3"
        class="elco">{{tableDataa.status}}</el-col>
        <el-col :span="4"
        class="elco">
        <el-link type="primary" :underline="false"><router-link to="/home/orderDetails" tag="span">订单详情</router-link></el-link>
        </el-col>
      </el-row>
     
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="a.page"
      :page-sizes="[5, 10, 15]"
      :page-size="a.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="a.count">
    </el-pagination>
    </el-tab-pane> -->
    <!-- 积分记录 -->
    <el-tab-pane label="积分记录" name="second">
       <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="oDate"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="oNumber"
        label="操作前数值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="iNumber"
        label="积分数值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="oIntegral"
        label="操作后积分"
        width="180">
      </el-table-column>
      <el-table-column
        prop="iCause"
        label="积分原因"
        width="170">
      </el-table-column>
      <el-table-column
        prop="iRemark"
        label="备注"
        width="150">
      </el-table-column>
    </el-table>
      <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="b.page"
      :page-sizes="[5, 10, 15]"
      :page-size="b.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="b.count">
    </el-pagination>
    </el-tab-pane>
    <!-- 成长值记录 -->
    <el-tab-pane label="成长值记录" name="third">
      <el-table
      :data="tableData1"
      style="width: 100%">
      <el-table-column
        prop="aDate"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="oGrowth"
        label="操作前成长值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="iGrowth"
        label="成长值数值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="oiGrowth"
        label="操作后成长值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gCause"
        label="成长值原因"
        width="170">
      </el-table-column>
      <el-table-column
        prop="gRemark"
        label="备注"
        width="150">
      </el-table-column>
    </el-table>
      <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="c.page"
      :page-sizes="[5, 10, 15]"
      :page-size="c.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="c.count">
    </el-pagination>
    </el-tab-pane>
    <!-- 储值记录 -->
    <el-tab-pane label="储值记录" name="fourth">
      <el-table
      :data="tableData2"
      style="width: 100%">
      <el-table-column
        prop="bDate"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="oBalance"
        label="操作前余额（元）"
        width="140">
      </el-table-column>
      <el-table-column
        prop="rBalance"
        label="充值金额（元）"
        width="140">
      </el-table-column>
      <el-table-column
        prop="gBalance"
        label="赠送金额（元）"
        width="140">
      </el-table-column>
      <el-table-column
        prop="aBalance"
        label="操作后余额（元）"
        width="150">
      </el-table-column>
      <el-table-column
        prop="rCause"
        label="操作原因"
        width="150">
      </el-table-column>
      <el-table-column
        prop="sRemark"
        label="备注"
        width="140">
      </el-table-column>
    </el-table>
      <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="d.page"
      :page-sizes="[5, 10, 15]"
      :page-size="d.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="d.count">
    </el-pagination>
    </el-tab-pane>
    <!-- 优惠券 -->
    <el-tab-pane label="优惠券" name="fifth">
      <el-table
      :data="tableData3"
      style="width: 100%">
      <el-table-column
        prop="aDate"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="dName"
        label="优惠券名称"
        width="140">
      </el-table-column>
      <el-table-column
        prop="face"
        label="面值（元）"
        width="140">
      </el-table-column>
      <el-table-column
        prop="ditch"
        label="获取渠道"
        width="140">
      </el-table-column>
      <el-table-column
        prop="state"
        label="使用状态"
        width="150">
      </el-table-column>
      <el-table-column
        prop="dRemark"
        label="操作备注"
        width="150">
      </el-table-column>
       <el-table-column
      label="操作"
      width="140">
      <template slot-scope="scope">
        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
      <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="e.page"
      :page-sizes="[5, 10, 15]"
      :page-size="e.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="e.count">
    </el-pagination>
    </el-tab-pane>
  </el-tabs>
    </el-card>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      dialogFormVisible: false,
      dialogTagVisible: false,
      dialogTotalVisible: false,
      dialogGrowVisible: false,
      dialogCardVisible: false,
      dialogGradeVisible: false,
      dialogRechargeVisible: false,
      dialogDeliverVisible: false,
      form:{
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      radio: "1",
      },
     
      
      input7: "400",
      input8: "",
      input9: "",
      input10: "400",
      input11: "",
      input12: "",
      input13: "400",
      input14: "",
      input15: "",
      input16: "",
      checked1:"",
      checked2:"",
      checked3:"",
      checked4:"",
      checked5:"",
      activeName:"second",
      receive:[],
      a:{
       page:1,
       size:5,
       count:0
      },
      b:{
       page:1,
       size:5,
       count:0
      },
      c:{
       page:1,
       size:5,
       count:0
      },
      d:{
       page:1,
       size:5,
       count:0
      },
      e:{
       page:1,
       size:5,
       count:0
      },
      
      
      //订单记录
      tableDataa: [{
        num:'',
        created: '',
        circleUrl:"https://portrait.gitee.com/uploads/avatars/user/3120/9361625_Zhaoyiqiao_1624953208.png!avatar60",
        name:'fff',
        price :'单价：400.00 数量：1',
        consignee: "王冕",
        consignee_phone: 18888888888,
        soucre:'微信商城',
        deliver:'物流快递',
        status:'待发货',
      }],

      //积分记录数据
      tableData: [],
      //成长值记录数据
      tableData1: [],
      //储值记录
      tableData2: [],
      //优惠券
      tableData3: [],
 };
},
   methods: {
      handleSizeChange(val) {
       this.a.size=val;
       this.b.size=val;
       this.c.size=val;
       this.d.size=val;
       this.e.size=val;  
      },
      handleCurrentChange(val) {
        this.a.page=val;
        this.b.page=val;
        this.c.page=val;
        this.d.page=val;
        this.e.page=val;
        
      },
    //获取积分记录
      get2(){
      this.$axios({
        url:'/vip/user/scoreList',
        params:{
         
         page:this.b.page,
         limit:this.b.size,
       }
      }).then((res)=>{
        this.tableData=res.data.data;
        this.b.count=res.data.count
      })
    },
    //获取成长值记录
      get3(){
      this.$axios({
        url:'/vip/user/growthList',
        params:{
         page:this.c.page,
         limit:this.c.size,
       }
      }).then((res)=>{
        this.tableData1=res.data.data;
        this.c.count=res.data.count
      })
    },
    //获取储值记录
    get4(){
      this.$axios({
        url:'/vip/user/storedList',
        params:{
         page:this.d.page,
         limit:this.d.size,
       }
      }).then((res)=>{
        this.tableData2=res.data.data;
        this.d.count=res.data.count
      })
    },
    //获取优惠劵
     get5(){
      this.$axios({
        url:'/vip/user/couponsList',
        params:{
         page:this.e.page,
         limit:this.e.size,
       }
      }).then((res)=>{
        this.tableData3=res.data.data;
        this.e.count=res.data.count
      })
    },
    //删除
      del(id){
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
           if(res=="confirm"){
               this.$axios({
                url:'/vip/user/deleteCoupons',
                params:{
                id:id
                }
         }).then((res)=>{
          if(res.data.code==0){
           this.get()
          }
         })
           }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //修改资料
        alter(){
          
          this.dialogFormVisible = true
          this.$axios({
            url:'/vip/user/update',
            method:'post',
            data:{
              id: this.$store.state.user.transmit,
              userName:this.form.input1,
              phone:this.form.input2,
              sex:this.form.radio,
              age:this.form.input3,
              consignee:this.form.input4,
              address:this.form.input5,
              description:this.form.input5,



            }
          }).then((res)=>{
            console.log(res);
          })
        }
    },
  mounted(){
    this.$store.state.user.transmit;
    this.$axios({
      url:'/vip/user/findById',
      params:{
          id:this.$store.state.user.transmit
      }
    }).then((res)=>{
      this.receive=res.data.data
     
    })
    
    this.get2();
    this.get3();
    this.get4();
    this.get5();
  }
};
</script>

<style lang="less" scoped>
//head
.elc1 {
  margin-bottom: 20px;
  height: 100px;
}
//body1
/deep/ .el-dialog{
  border-radius: 5px;
}
/deep/ .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid #eee;
  }
.elc2 {
  margin-bottom: 20px;
  .el-aside {
    /deep/ .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid #eee;
      span {
        font-size: 18px;
      }
    }
    .ss1 {
      font-size: 18px;
    }
    span {
      font-size: 14px;
    }
    .el-avatar {
      margin: 50px 20px 0 15px;
    }
    .el-button {
      margin: 20px 0 5px 0;
    }
    // 弹出框
    .el-dialog {
      font-size: 14px;
      .el-row {
        margin-bottom: 10px;
      }
      .el-input {
        width: 250px;
      }
      .eli1 {
        width: 400px;
      }
      .elb {
        margin-left: 20px;
      }
    }
  }
  .el-main {
    background: #fff;
    .el-row {
      font-size: 14px;
      margin-bottom: 20px;
    }
    .s1 {
      margin-right: 10px;
    }
  }
}
//body2
.elc3 {
  margin-bottom: 20px;
  .el-row{
    margin-bottom: 20px;
  }
  .s1 {
    font-size: 18px;
    margin-right: 20px;
  }
  .s2 {
    font-size: 12px;
    border:1px solid #ddd;
    background: #f3f3f3;
    border-radius: 3px;
    padding: 4px 10px;
    margin:20px 10px 0 0;
  }
  .el-checkbox-button {
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px 30px 5px;
  }
  
}
//body3
.elc4 {
  margin-bottom: 20px;
  .el-row{
  margin-bottom: 20px;
  }
  .s1{
    font-size: 18px;
  }
  .s2{
    font-size: 14px;
  }
  .s3{
     font-size: 18px;
     margin-left: 10px;
   }
  .s3-1{
      font-size: 14px;
      color:#ffaa00 ;
    }
    .ell{
      margin-left: 20px;
    }
  .elr{
    margin-bottom: 10px;
    margin-left:10px ;
  }
  .elc{
    color: #fff;
    width: 350px;
    height: 180px;
    border: 1px solid #ddd;
    border-radius: 20px;
   background-image: linear-gradient(to right, #fbb613 , #fb5d13);
  }
  .b1{
     margin-top:30px ;
     padding: 3px;
     background: #fff;
     color: #fbb613;
   }
   .b2{
     font-size: 25px;
   }
   .s4-4{
     margin-left: 10px;
     font-size: 22px;
   }
   .elr1{
     margin: 50px 0 10px 0;
   }
   .elr2{
     margin: 20px 0 20px 20px;
   }
   .elr3{
     margin: 0 20px;
   }
   .s5{
     font-size: 16px;
     margin: 10px 0;
   }
   .s6{
    margin-left: 10px;
   }
   .s5-1{
     margin-left: 15px;
   }
   .elc1{
    color: #fff;
    width: 350px;
    height: 180px;
    border: 1px solid #ddd;
    border-radius: 20px;
   background: #09cd8a;
  }
  .elr1-1{
    margin: 30px 0 10px 0;
  }
  .elp{
    margin-bottom: 10px;
  }
  .ee{
    margin-top: 40px;
    margin-bottom: 0;
  }
}
//foot
.elc5{
 /deep/ .el-tabs__item{
  font-size: 16px;
  padding-right: 40px;
  }
 /deep/ .el-tabs__nav-wrap::after{
   height: 1px;
 }
 .el-table{
   margin-top: 20px;
 }
 /deep/ .cell,.el-col{
  height: 25px;
  line-height: 25px;
  font-size: 14px;
 }
 /deep/ .el-table th, .el-table tr{
   background:#f6f6f6;
 }
.elrh,.elrb{
 background: #f6f6f6;
 padding: 12px 10px;
 font-weight: bold;
 color: #909399;
 margin-top:20px ;
}
.elrf{
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
 .elco{
  margin-top: 15px;
  height:50px;
  line-height: 50px;
 }
 .ell{
   margin-right: 35px;
 }
 .eld{
   /deep/ .el-dialog__header{
     height: 25px;
     line-height: 25px;
   }
  .el-col{
    margin-bottom: 15px;
  }
  .el-select {
    width: 460px;
  }
  .elcl{
    margin-top: 15px;
  }
  .ee{
    margin-top: 40px;
  }
 }
}
}
</style>